<template>
  <div class="roster-container">
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex">
        <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title" @click="selectOrg">{{currentOrg}}</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
        <Icon type="ios-calendar-outline" size="20" />
        <DatePicker type="date" clearable @on-clear="clearDate" @on-change="dateChange" class="ml12" placeholder="选择日期" style="width: 200px"></DatePicker>
        <Select
          v-model="employee_name"
          filterable
          remote
          :remote-method="searchByName"
          :loading="loading1"
          @on-change="addSelectName"
          style="width:200px"
          placeholder="姓名"
          clearable
          @on-clear="clearName"
          class="ml12"
        >
          <Option
            v-for="(option, index) in nameOptions"
            :value="option.value"
            :key="index"
          >{{option.label}}</Option>
          <span></span>
        </Select>
      </div>
    </div>

    <!-- 出勤人数 -->
    <div class="work-number">
      <a href="javascript:" class="num active">出勤{{total}}人</a>
      <a href="javascript:" class="num" v-for="(item, index) in count" 
      :key="index">{{item.name}}{{item.cnt}}人</a>
    
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <div class="tab-header-info flex">
        <div class="header-info-lefe flex">
          <ColorBar/>
        </div>
        <div class="header-info-right">
          <ul class="table-actions flex">
            <li class="table-action-item">
              刷新
              <Icon type="ios-refresh" size="18" />
            </li>
            <!-- <li class="table-action-item">
              <Dropdown>
                <div>
                  按部门排序
                  <Icon type="ios-arrow-down"></Icon>
                </div>
                <DropdownMenu slot="list">
                  <DropdownItem>按岗位职级排序</DropdownItem>
                  <DropdownItem>按最早入职排序</DropdownItem>
                  <DropdownItem>按最近入职排序</DropdownItem>
                  <DropdownItem>工号升序</DropdownItem>
                  <DropdownItem>工号降序</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </li>
            <li class="table-action-item" @click="multiEditing">批量编辑</li>
            <li class="table-action-item">导出</li> -->
          </ul>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-wrap">
        <Table width="100%" :columns="columns" :data="list" class="table4 mt32" :loading="tableLoading"></Table>
      </div>
    </div>

    <!-- 快速编辑 -->
    <div class="mask none" :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
    <div class="right-cart none" :class="{block:rightCardCloseStatus}">
      <div class="right-cart-top flex">
        <div class="right-cart-title">编辑员工信息</div>
        <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
      </div>
      <!-- <div class="right-cart-body">
        <Form :model="formItem" :label-width="110" ref="formValidate" :rules="ruleValidate">
          <div class="form-item-row">
            <FormItem label="姓名">
              <Input v-model="formItem.name" placeholder="姓名" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="工号" class="form-item">
              <Input v-model="formItem.input" placeholder="工号" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="部门" class="form-item">
              <Select v-model="formItem.select" class="form-input">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
            <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" />
          </div>
          <div class="form-item-row">
            <FormItem label="岗位">
              <Select v-model="formItem.select" class="form-input">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
            <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" />
          </div>
          <div class="form-item-row form-item-row2">
            <FormItem label="证件类型">
              <Select v-model="formItem.select" class="form-input">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
            <div class="form-item-tip">
              管理证件类型，
              <a>点击这里</a>
            </div>
          </div>
          <div class="form-item-row">
            <FormItem label="证件号码">
              <Input v-model="formItem.input" placeholder="岗位" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="手机号码">
              <Input v-model="formItem.input" placeholder="岗位" class="form-input"></Input>
            </FormItem>
          </div>
        </Form>
      </div> -->
      <!-- <div class="right-cart-footer">
        <Button type="primary" class="cancle-btn-border" @click="closeRightCard">取消</Button>
        <Button type="default" class="save-btn-green ml12" @click="closeRightCard">保存</Button>
      </div> -->
    </div>

    <!-- 快速编辑end -->

       <!-- modal -->
    <Modal v-model="selectModal" width="720" class="selecte-modal org-modal">
      <p slot="header" style="font-weight:bold;">选择部门</p>
      <div class="m-c-content flex-box">
        <div class="selecte-modal-left">
          <Tabs value="name1" name="tab2">
            <TabPane label="选择部门" tab="tab2" name="name1">
              <div class="tab-content">
                <!-- <Input search placeholder="搜索员工姓名" class="search-inp" /> -->
                <ul class="lately-group">
                  <li class="lately-item flex-box">
                    <label for>
                      <Checkbox @on-change="selectAll" v-model="all">
                        <div class="right-info flex-box">全选</div>
                      </Checkbox>
                    </label>
                  </li>
                  <li class="lately-item flex-box" v-for="(item,index) in orgList" :key="index">
                    <label for>
                      <Checkbox v-model="item.checked" @on-change="orgCheck">
                        <div class="right-info flex-box">
                          <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
                          {{item.organization_name}}
                          <span>（{{item.employee_num}}人）</span>
                        </div>
                      </Checkbox>
                    </label>
                  </li>
                </ul>
              </div>
            </TabPane>
            <TabPane label="最近选择" tab="tab2" name="name2">
              <div class="tab-content-2"></div>
            </TabPane>
          </Tabs>
        </div>
        <div class="selecte-modal-right">
          <div class="s-r-header flex-box" v-if="orgNum">
            <div class="s-r-header-left flex-box">
              <div class="s-r-h-title mr12">已选：</div>
              <div class="s-r-h-detail">
                <span v-if="orgNum">部门{{orgNum}}个</span>
                <Icon
                  type="md-close-circle"
                  class="pointer"
                  size="14"
                  @click="changeAllStatus(false)"
                />
              </div>
            </div>
          </div>
          <div class="s-r-list">
            <div
              class="s-r-l-item"
              v-for="(item,index) in orgList"
              :key="index"
              v-if="item.checked"
            >
              <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
              <div class="s-r-l-item-name">
                <span class="ellipse">{{item.organization_name}}</span>
              </div>
              <div class="close-right-icon">
                <Icon type="md-close" @click="delSelect(index,'org')" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div class="m-c-footer flex">
          <div class="m-c-left">
            <!-- <span>没有找到想要的项目？ </span>
            <span class="ml12"><a href="">去添加项目</a></span>-->
          </div>
          <div class="m-c-right">
            <Button @click="cancelSelect" class="no-border-btn">取消</Button>
            <Button class="save-btn-green" @click="confirmSelect">确认</Button>
          </div>
        </div>
      </div>
    </Modal>

    <!-- modal -->

  </div>
</template>
<script>
import { attendance,personnel  } from "@/apis";
import http from "@/utils/http";
export default {
  name: "list",
  data() {
    return {
      total:0,
      count:[],

      selectModal: false,
      orgList: [],
      orgNum: 0,
      all: false,
      currentOrg: "选择部门",
      employee_name: "", //筛选的name
      loading1: false,
      nameOptions: [],
      selectDate:"",

      columns: [
        
        {
          title: " ",
          key: "avatar",
          width: 60,
          render: (h, params) => {
            return h("div", [
              h("img", {
                class: "avatar-table",
                attrs: {
                  src:
                    ""
                }
              })
            ]);
          }
        },
        {
          title: "姓名",
          key: "name",
          width: 100
        },
        {
          title: "工号",
          key: "employee_id",
           width: 100
        },
        {
          title: "部门",
          key: "organization_name",
           width: 100
        },
        {
          title: "岗位",
          key: "position",
          width: 100
        },
        {
          title: "班次",
          key: "shift_id",
          width: 100
        },
        {
          title: "打卡时间",
          key: "clock_in",
          width: 150
        },
        {
          title: "日出勤时长",
          key: "daily_attendance",
          width: 100
        },
        {
          title: "第一段上班",
          key: "first_stage_work",
          width: 150
        },
        {
          title: "第一段下班",
          key: "first_stage_duty",
          width: 150
        },
        {
          title: "第二段上班",
          key: "second_stage_work",
          width: 150
        },
        {
          title: "第二段下班",
          key: "second_stage_duty",
          width: 150
        },
        {
          title: "第三段上班",
          key: "third_stage_work",
          width: 150
        },
        {
          title: "第三段下班",
          key: "third_stage_duty",
          width: 150
        },
        // {
        //   title: "操作",
        //   key: "action",
        //   fixed: "right",
        //   width: 120,
        //   render: (h, params) => {
        //     return h("div", [
        //       h(
        //         "Button",
        //         {
        //           props: {
        //             type: "text",

        //             className: "table-action-btn"
        //           },
        //           class: "table-action-btn",
        //           on: {
        //             click: () => {
        //               this.openRightCard(params);
        //             }
        //           }
        //         },
        //         "查看"
        //       )
        //     ]);
        //   }
        // }
      ],
      openTableTitle: false,
      formItem: {
        input: "",
        select: "",
        radio: "male",
        checkbox: [],
        switch: true,
        date: "",
        time: "",
        slider: [20, 50],
        textarea: ""
      },
      rightCardCloseStatus: false,
      list:[], //每日考勤列表
      tableLoading: false
    };
  },
  methods: {
    triggerTableTitle() {
      this.openTableTitle = true;
    },
    cancleTableTitle() {
      this.openTableTitle = false;
    },
    saveTableTitle() {
      this.openTableTitle = false;
    },
    closeRightCard() {
      this.rightCardCloseStatus = false;
    },
    openRightCard(params) {
      this.rightCardCloseStatus = true;
      console.log('数据', params);
    },
    multiEditing() {
      console.log(1);
      console.log(this.columns[0].type);
      if (!this.columns[0].type && this.columns[0].type !== "selection") {
        this.columns.unshift({
          title: " ",
          key: "selection",
          type: "selection",
          width: "60"
        });
      } else {
        this.columns.shift();
      }
    },
    addEmployee() {
      this.$router.push("/personnel/relation/enrollment/add/employee");
    },


    // 获取每日考勤列表
    getList(){
      this.tableLoading = true;
      let organization_id = [];
      this.orgList.forEach(e => {
        if (e.checked) {
          organization_id.push(e.organization_id);
        }
      });
      

      http.get(attendance.workattendancelist,{
        params:{
          organization_id:organization_id.join(","),
          name:this.employee_name,
          date:this.selectDate,
        }
      }).then( res=>{
       let list = res.data.list.data ;
        if(list.length){
          list.forEach(e => {
              e = Object.assign(e,e.employee_info);
          });
        }
        this.list = list;
        this.tableLoading = false;
      })
    },

    // 获取考勤详情
    getDetail(){

    },

    dateChange(e){
      console.log(e);
      this.selectDate = e;
      this.getList();
    },
    clearDate(e){
      this.selectDate = "";
      this.getList();
    },
    getOrg() {
      this.$getOrgList().then(res => {
        this.orgList = res.data.list || [];
      });
    },
    confirmSelect() {
      console.log(2222);
      let orgName = [];
      this.orgList.forEach(e => {
        if (e.checked) {
          orgName.push(e.organization_name);
        }
      });
      this.currentOrg = orgName.join(",") || "选择部门";
      this.selectModal = false;
      console.log(orgName);
      if (orgName.length) {
        this.getList(); //更新列表数据
      }
    },
    cancelSelect() {
      this.selectModal = false;
    },
    orgCheck(e, index) {
      //选择组织
      this.updateOrgNum();
    },
    changeAllStatus(type) {
      //清除或者全选
      this.orgList.forEach(e => {
        e.checked = type;
      });

      // 更新数据
      this.updateOrgNum();
      if (!type) {
        // this.orgNames = "";
        this.all = false;
      }
    },
    selectAll(e) {
      this.all = e;
      this.changeAllStatus(e);
    },
    updateOrgNum() {
      let num = 0;
      this.orgList.forEach(e => {
        if (e.checked) {
          num++;
        }
      });
      if (this.orgList.length == num) {
        this.all = true;
      } else {
        this.all = false;
      }
      this.orgNum = num;
    },
    selectOrg() {
      this.selectModal = true;
    },
    searchByName(query) {
      if (query !== "") {
        this.loading1 = true;
        let _this = this;
        http
          .get(personnel.employeelist, {
            params: {
              name: query
            }
          })
          .then(res => {
            let list = res.data.list.data || [];
            let temp = [];
            list.forEach(e => {
              temp.push({
                value: e.name,
                label: e.name
              });
            });
            _this.loading1 = false;
            _this.nameOptions = temp;
          });
      }
    },
    addSelectName(a, b) {
      this.getList(); //更新筛选列表
    },
    clearName() {
      this.employee_name = "";
      this.getList();
    },

    
    getInfo(){
      http.get(attendance.workattendancestat,{
        
      }).then( res=>{
          console.log(res);
          let _count = res.data.count;
          let temp = [];
          let total =0;
          _count.forEach(e=>{
            if(e.status == 1){
              e.name == "正常"
            }
            else if(e.status == 2){
              e.name == "迟到"
            }
            else if(e.status == 3){
              e.name == "缺卡"
            }
            else if(e.status == 4){
              e.name == "补卡"
            }
            else if(e.status == 5){
              e.name == "早退"
            }
            temp.push({
              name:e.name,
              cnt:e.cnt
            })
            total +=e.cnt
          })
          this.count = temp;
          this.total = total;
      })
    }
    
  },
  mounted() {
    this.getList();
    this.getOrg();
    this.getInfo();
  },
};
</script>
<style lang="scss" scoped src="./index.scss"></style>